<template>
  <div class="docs-page">
    <!-- 左侧导航 -->
    <aside class="sidebar" :class="{ 'sidebar-open': isSidebarOpen }">
      <div class="sidebar-header">
        <input
          type="text"
          v-model="searchDocs"
          placeholder="搜索文档..."
          class="search-input"
        />
      </div>
      <nav class="nav-menu">
        <div
          v-for="section in docSections"
          :key="section.id"
          class="nav-section"
        >
          <div class="section-title">{{ section.title }}</div>
          <div
            v-for="item in section.items"
            :key="item.id"
            class="nav-item"
            :class="{ active: currentDoc === item.id }"
            @click="selectDoc(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </nav>
    </aside>

    <!-- 右侧内容区 -->
    <main class="content">
      <div class="content-container">
        <article class="doc-content">
          <div class="breadcrumb">
            {{ currentSection }} / {{ currentDocContent.title }}
          </div>
          <h1>{{ currentDocContent.title }}</h1>
          <div class="metadata">
            <span class="last-updated"
              >最后更新: {{ currentDocContent.lastUpdated }}</span
            >
            <span class="version">版本: {{ currentDocContent.version }}</span>
          </div>

          <div class="content-body">
            {{ currentDocContent.content }}
          </div>

          <!-- 文档底部导航 -->
          <div class="doc-footer">
            <div
              v-if="prevDoc"
              class="nav-button prev"
              @click="selectDoc(prevDoc.id)"
            >
              <span class="label">上一篇</span>
              <div class="title">{{ prevDoc.title }}</div>
            </div>
            <div
              v-if="nextDoc"
              class="nav-button next"
              @click="selectDoc(nextDoc.id)"
            >
              <span class="label">下一篇</span>
              <div class="title">{{ nextDoc.title }}</div>
            </div>
          </div>
        </article>
      </div>
    </main>

    <!-- 移动端菜单按钮 -->
    <button class="menu-toggle" @click="toggleSidebar">
      <span class="menu-icon"></span>
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟文档数据
const docSections = [
  {
    id: 'getting-started',
    title: '开始使用',
    items: [
      { id: 'introduction', title: '介绍' },
      { id: 'installation', title: '安装' },
      { id: 'quick-start', title: '快速开始' },
    ],
  },
  {
    id: 'basic-components',
    title: '基础组件',
    items: [
      { id: 'ksampler', title: 'KSampler' },
      { id: 'clip', title: 'CLIPTextEncode' },
      { id: 'vae', title: 'VAE' },
    ],
  },
  {
    id: 'advanced',
    title: '进阶指南',
    items: [
      { id: 'workflow', title: '工作流' },
      { id: 'optimization', title: '优化技巧' },
      { id: 'custom', title: '自定义组件' },
    ],
  },
];

// 模拟文档内容
const docContents = {
  introduction: {
    title: '介绍',
    lastUpdated: '2024-03-20',
    content: 'ComfyUI 是一个功能强大的 AI 工作流程工具...',
  },
  // 其他文档内容...
};

const currentDoc = ref('introduction');
const searchDocs = ref('');
const isSidebarOpen = ref(false);

const currentDocContent = computed(() => {
  return (
    docContents[currentDoc.value] || { title: '', lastUpdated: '', content: '' }
  );
});

const prevDoc = computed(() => {
  // 实现上一篇文档的逻辑
  return null;
});

const nextDoc = computed(() => {
  // 实现下一篇文档的逻辑
  return null;
});

const selectDoc = (id) => {
  currentDoc.value = id;
  isSidebarOpen.value = false;
};

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value;
};
</script>

<style scoped>
.docs-page {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #111827;
}

.sidebar {
  width: 300px;
  background: #1f2937;
  border-right: 1px solid #374151;
  position: fixed;
  top: 64px;
  bottom: 0;
  overflow-y: auto;
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid #374151;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: #111827;
  color: #f3f4f6;
  font-size: 0.95rem;
}

.search-input:focus {
  outline: none;
  border-color: #3450ff;
}

.nav-menu {
  padding: 24px 0;
}

.section-title {
  padding: 0 24px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-item {
  padding: 8px 24px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.nav-item:hover {
  color: #f3f4f6;
  background: #374151;
}

.nav-item.active {
  color: #3450ff;
  background: #374151;
  border-right: 2px solid #3450ff;
}

.content {
  flex: 1;
  margin-left: 300px;
  padding: 40px;
}

.content-container {
  max-width: 768px;
  margin: 0 auto;
}

.breadcrumb {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.doc-content h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: #f3f4f6;
  letter-spacing: -0.02em;
}

.metadata {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  color: #6b7280;
  font-size: 0.9rem;
}

.content-body {
  color: #9ca3af;
  line-height: 1.8;
  font-size: 1.05rem;
}

.doc-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid #374151;
}

.nav-button {
  flex: 0 0 45%;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-button:hover {
  background: #1f2937;
}

.nav-button .label {
  display: block;
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.nav-button .title {
  color: #f3f4f6;
  font-size: 1.1rem;
}

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 90;
  }

  .sidebar-open {
    transform: translateX(0);
  }

  .content {
    margin-left: 0;
    padding: 24px;
  }

  .menu-toggle {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3450ff;
    border: none;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .menu-icon {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    margin: 0 auto;
    position: relative;
  }

  .menu-icon::before,
  .menu-icon::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: white;
    left: 0;
  }

  .menu-icon::before {
    top: -6px;
  }

  .menu-icon::after {
    bottom: -6px;
  }

  .doc-content h1 {
    font-size: 2rem;
  }
}
</style>
